<template>
    <div class="mui-content orderCancel">
        <!--订单状态-->
        <ul class="mui-table-view orderStatus mgb1">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right text2">取消原因
                    <span class="mui-pull-right color2 mgr1" id="userReason" readonly="readonly" @click="initPicker()">未选择</span>
                </a>
            </li>
        </ul>

        <!--确认服务按钮-->
        <div class="operateBtn mui-clearfix">
            <button class="mui-btn mui-btn-primary" @click="orderCancel()">确认取消订单</button>
        </div>
    </div>
</template>
<style>
</style>
<script type="text/ecmascript-6">
    import pickerComponent from '../../components/picker/picker.vue';
    import '../../fonts/mui.css';
    import Page from '../../base/Page'
    import { API } from '../../config/constants'
    export default new Page({
        data(){
            return{
                orderCode:'',
                orderCancelReason:'',
                reasons:[]
            }
        },
        ready () {
            mui.init();
            //下拉框初始化数据
            this.getJSON(API.GET_DICT_LIST, {key:'CANCEL_C_REASON'}, res => {
                this.reasons = res.resultData;
                this.orderCode = this.$route.params.id;
                //console.log(JSON.stringify(this.reasons));
            });
        },
        components:{
            pickerComponent
        },
        methods:{
            initPicker:function() {
                let that = this;
                (function($, doc) {
                    $.init();
                    $.ready(function() {
                        //普通示例
                        var userPicker = new $.PopPicker();
                        userPicker.setData(that.reasons);
                        var userReason=doc.getElementById('userReason');
                        userPicker.show(function(items) {
                            userReason.innerText = items[0].text;
                            that.orderCancelReason = items[0].value;
                        }, false);
                    });
                })(mui, document);
            },
            orderCancel:function(){
                if ('' === this.orderCancelReason) {
                    mui.toast('请选择取消订单原因',{ duration:'short', type:'div' });
                    return;
                }
                var postData = {orderCode:this.orderCode,orderCancelReason:this.orderCancelReason};

                //commit cancel to server
                this.post(API.POST_ORDER_CANCEL, postData, res => {
                    this.$route.router.go('/tip/success/orderCancel');
                });
            }
        },
    })
</script>